<template>
  <div>
    <a-collapse :default-active-key="[2, 3, 4]" :bordered="false">
      <a-collapse-item header="按钮组设置" :key="2">
        <div class="chooseBox">
          <p class="title">展示样式</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.styleType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式1</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">样式2</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="chooseBox">
          <p class="title">更多按钮</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.showMore">
              <a-radio :value="true">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">开启</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="false">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">关闭</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="chooseBox">
          <p class="title">展示数量</p>
          <div class="radioBox" style="padding: 0px">
            <a-input type="text" v-model="currentTemp.showNum" placeholder="请输入展示数量" />
          </div>
        </div>
      </a-collapse-item>
      <a-collapse-item header="按钮设置" :key="3">
        <div class="imageBox">
          <draggable v-model="currentTemp.btnList" @end="onEnd">
            <template #item="{ element, index }">
              <div class="imageBox_item" :key="index">
                <a-upload
                  action="/app/file/upload"
                  :show-file-list="false"
                  @success="onSuccessBcg($event, element)"
                  @error="error($event, element)"
                  :image-preview="true"
                >
                  <template #upload-button>
                    <div class="arco-upload-list-picture custom-upload-avatar" v-if="element.img">
                      <img style="display: block; width: 80px; height: 80px" :src="element.img" />
                      <div class="arco-upload-list-picture-mask">
                        <IconEdit />
                      </div>
                    </div>
                    <div class="arco-upload-picture-card" v-else>
                      <div class="arco-upload-picture-card-text">
                        <IconPlus />
                      </div>
                    </div>
                    <!-- </div> -->
                  </template>
                </a-upload>

                <div class="rightBox">
                  <a-button
                    v-if="element.link == ''"
                    class="chooseBtn"
                    long
                    @click="chooseLink(index)"
                    ><icon-link /><p class="chooseText">请选择链接</p>
                  </a-button>
                  <a-button v-else class="chooseBtn" long @click="chooseLink(index)"
                    ><p class="chooseText">{{ element.link }}</p>
                  </a-button>
                  <div class="texts">
                    <p class="titles">按钮状态</p>
                    <a-radio-group v-model="element.status">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </div>
                </div>
                <div class="contents">
                  <div class="items">
                    <p class="titles">按钮名称</p>
                    <div class="whiteBg">
                      <a-input
                        :style="{ width: '60%' }"
                        type="text"
                        v-model="element.name"
                        placeholder="请输入按钮名称"
                      />
                    </div>
                  </div>
                  <div class="items">
                    <p class="titles">复制号码</p>
                    <div class="whiteBg" style="padding-left: 8px">
                      <a-radio-group v-model="element.copyCard">
                        <a-radio :value="true">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">开启</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="false">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">关闭</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </div>
                  </div>
                  <div class="items">
                    <p class="titles">按钮标签</p>
                    <div class="whiteBg" style="padding-left: 8px">
                      <a-radio-group v-model="element.tag">
                        <a-radio :value="true">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">开启</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="false">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">关闭</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </div>
                  </div>
                  <div class="items">
                    <p class="titles">标签内容</p>
                    <div class="whiteBg">
                      <a-input
                        :style="{ width: '60%' }"
                        type="text"
                        v-model="element.tagText"
                        placeholder="请输入标签内容"
                      />
                    </div>
                  </div>
                  <div class="sliderBox_color">
                    <p>标签颜色</p>

                    <div
                      style="
                        width: 40px;
                        height: 40px;
                        cursor: pointer;
                        border: 6px solid #f5f5f5;
                        border-radius: 4px;
                      "
                      :style="{ backgroundColor: element.tagColor }"
                      @click="changSketch1(element)"
                    ></div>

                    <Sketch
                      class="setColor"
                      v-model="element.tagColor"
                      :show="element.showChooseColor1"
                      @changButton="changSketchButton1($event, element)"
                    />

                    <a-button
                      type="text"
                      style="margin-left: 12px"
                      @click="element.tagColor = '#ffffff'"
                      >重置</a-button
                    >
                  </div>
                  <div class="sliderBox_color">
                    <p>标签背景</p>

                    <div
                      style="
                        width: 40px;
                        height: 40px;
                        cursor: pointer;
                        border: 6px solid #f5f5f5;
                        border-radius: 4px;
                      "
                      :style="{ backgroundColor: element.tagBg }"
                      @click="changSketch2(element)"
                    ></div>

                    <Sketch
                      class="setColor"
                      v-model="element.tagBg"
                      :show="element.showChooseColor2"
                      @changButton="changSketchButton2($event, element)"
                    />

                    <a-button
                      type="text"
                      style="margin-left: 12px"
                      @click="element.tagBg = '#ffffff'"
                      >重置</a-button
                    >
                  </div>
                </div>
                <div style="width: 100%">
                  <a-button type="primary" status="danger" @click="deleteContent(index)" long
                    >删除</a-button
                  >
                </div>
              </div>
            </template>
          </draggable>
          <div class="addImageBox" @click="addImageBoxs"> 添加按钮 </div>
        </div>
      </a-collapse-item>
      <a-collapse-item header="间距(px)" :key="2">
        <div class="sliderBox">
          <p>上边距</p>
          <a-slider
            v-model="currentTemp.paddingTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下边距</p>
          <a-slider
            v-model="currentTemp.paddingBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>左右边距</p>
          <a-slider
            v-model="currentTemp.paddingTwice"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="圆角设置(px)" :key="3">
        <div class="sliderBox">
          <p>上圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumTop"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
        <div class="sliderBox">
          <p>下圆角</p>
          <a-slider
            v-model="currentTemp.radiusNumBottom"
            show-input
            style="width: 100%"
            :min="0"
            :max="100"
          />
        </div>
      </a-collapse-item>
      <a-collapse-item header="背景设置" :key="4">
        <div class="chooseBox">
          <p class="title">展示类型</p>
          <div class="radioBox">
            <a-radio-group v-model="currentTemp.showType">
              <a-radio :value="1">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">颜色</div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                    <div className="custom-radio-card-mask">
                      <div className="custom-radio-card-mask-dot"></div>
                    </div>
                    <div className="custom-radio-card-title">图片</div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="uploadBox" style="margin-bottom: 10px" v-if="currentTemp.showType == 2">
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onSuccessBgImage($event)"
            @error="errorBgImage($event)"
            :image-preview="true"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="currentTemp.bgImage">
                <img style="display: block; width: 80px; height: 80px" :src="currentTemp.bgImage" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </div>

        <div class="sliderBox_color2">
          <p style="width: 100%; margin-bottom: 5px">填充颜色</p>
          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.boxBg }"
            @click="changSketch3"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.boxBg"
            :show="colorForm.showSketchBg"
            @changButton="changSketchBg"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.boxBg = '#ffffff'"
            >重置</a-button
          >
        </div>
        <div class="sliderBox_color2">
          <p style="width: 100%; margin-bottom: 5px">字体颜色</p>

          <div
            style="
              width: 40px;
              height: 40px;
              cursor: pointer;
              border: 6px solid #f5f5f5;
              border-radius: 4px;
            "
            :style="{ backgroundColor: currentTemp.fontColor }"
            @click="changSketch4"
          ></div>

          <Sketch
            class="setColor"
            v-model="currentTemp.fontColor"
            :show="colorForm.showSketchFont"
            @changButton="changSketchFont"
          />

          <a-button type="text" style="margin-left: 12px" @click="currentTemp.fontColor = '#000'"
            >重置</a-button
          >
        </div>
      </a-collapse-item>
    </a-collapse>
    <a-modal
      v-model:visible="tagvisible"
      @cancel="handleCancelTag"
      title="选择链接"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userFormTag" :auto-label-width="true" :model="subForm">
        <a-form-item field="type" label="链接类型">
          <a-select v-model="subForm.type" placeholder="请选择链接类型" allow-clear>
            <a-option v-for="(item, index) in linktypeLists" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 1"
          label="跳转链接"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.links" placeholder="请输入跳转链接" allow-clear />
        </a-form-item>
        <a-form-item
          v-if="subForm.type == 2"
          field="links"
          :rules="[
            { required: true, message: '跳转链接不能为空' },
            { minLength: 1, maxLength: 100, message: '跳转链接必须小于100个字符' },
          ]"
          label="系统功能"
        >
          <a-select v-model="subForm.links" placeholder="请选择系统功能" allow-clear>
            <a-option v-for="(item, index) in props.menus" :key="index" :value="item.link">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelTag">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkLink">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import draggable from 'vuedraggable'
  import { computed, watch, ref, onMounted } from 'vue'
  import * as http from '@/api/http'
  import { getSeriesButtons } from '@/api/url'
  import { Sketch } from '@ans1998/vue3-color'
  import useCommonStore from '@/store/modules/common'
  const useCommon = useCommonStore()
  const emit = defineEmits(['change'])
  const tagvisible = ref(false)
  const props = defineProps({
    // 选中的当前组件参数
    config: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {
      type: String,
      default: () => {
        return {}
      },
    },
    menus: {
      type: Array,
      required: true,
    },
  })
  const colorForm = ref({ showSketchBg: false, showSketchFont: false })
  const typeLists: any = ref([])
  const linktypeLists = ref([
    { id: 1, name: '自定义' },
    { id: 2, name: '系统功能' },
  ])
  const currentTemp = computed(() => props.config)
  const pageObj: any = ref({})
  const setChange = (val: any) => {
    console.log(val)
    http
      .get({
        url: getSeriesButtons,
        data: { planId: val, componentName: 'buttons', name: props.pageName },
      })
      .then((res) => {
        console.log(res)
        if (res.code == 0) {
          pageObj.value = res.data
        }
      })
  }
  const changSketchBg = (item: any) => {
    colorForm.value.showSketchBg = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.boxBg = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchFont = (item: any) => {
    colorForm.value.showSketchFont = false
    console.log(item)
    if (item.isOk) {
      currentTemp.value.fontColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const onEnd = (event) => {
    console.log('Drag ended', event)
  }
  const clickdianType = (val: any) => {
    currentTemp.value.btnType = val
  }
  function deleteContent(val: any) {
    currentTemp.value.btnList.splice(val, 1)
  }
  //背景图上传
  const onSuccessBcg = (e: any, fileItem: any) => {
    fileItem.img = e.response.data.path
    console.log(e, fileItem)
  }
  const error = (e: any, fileItem: any) => {
    console.log(e, fileItem)
    fileItem.img = e.response.data.path
  }
  //背景图上传
  const onSuccessBgImage = (e: any) => {
    currentTemp.value.bgImage = e.response.data.path
    console.log(e)
  }
  const errorBgImage = (e: any) => {
    console.log(e)
    currentTemp.value.bgImage = e.response.data.path
  }
  const copyBtns = () => {
    currentTemp.value.btnList = pageObj.value.componentConfig.btnList
    currentTemp.value.btnType = pageObj.value.componentConfig.btnType
    currentTemp.value.items = pageObj.value.componentConfig.items
    currentTemp.value.jiaohu = pageObj.value.componentConfig.jiaohu
    currentTemp.value.lines = pageObj.value.componentConfig.lines
    currentTemp.value.paddingBottom = pageObj.value.componentConfig.paddingBottom
    currentTemp.value.paddingTop = pageObj.value.componentConfig.paddingTop
    currentTemp.value.paddingTwice = pageObj.value.componentConfig.paddingTwice
    currentTemp.value.radiusNumBottom = pageObj.value.componentConfig.radiusNumBottom
    currentTemp.value.radiusNumTop = pageObj.value.componentConfig.radiusNumTop
  }
  const addImageBoxs = () => {
    currentTemp.value.btnList.push({
      name: '',
      showChooseColor1: false,
      showChooseColor2: false,
      img: '',
      link: '',
      tag: false,
      tagText: '',
      tagColor: '#ffffff',
      tagBg: '#ff0000',
      status: 0,
    })
  }
  const seriesNo: any = ref()
  const linkLists = ref([{ link: '/page/home/set', name: '设置' }])
  const subForm = ref({
    type: 1,
    links: '',
    idx: 0,
  })
  const handleCancelTag = () => {
    tagvisible.value = false
    subForm.value = {
      type: 1,
      links: '',
      idx: 0,
    }
  }
  const chooseLink = (val: any) => {
    subForm.value.idx = val
    subForm.value.links = currentTemp.value.btnList[val].link
    tagvisible.value = true
  }
  const userFormTag = ref()
  const handleBeforeOkLink = () => {
    // userFormTag
    userFormTag.value?.validate().then((error: any) => {
      if (!error) {
        currentTemp.value.btnList[subForm.value.idx].link = subForm.value.links
        tagvisible.value = false
      }
    })
  }
  const changSketchButton1 = (item: any, val: any) => {
    val.showChooseColor1 = false
    console.log(item)
    if (item.isOk) {
      val.tagColor = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketchButton2 = (item: any, val: any) => {
    val.showChooseColor2 = false
    console.log(item)
    if (item.isOk) {
      val.tagBg = item.activeColor
    } else {
      console.log('取消')
    }
  }
  const changSketch1 = (item: any) => {
    item.showChooseColor1 = true
  }
  const changSketch2 = (item: any) => {
    item.showChooseColor2 = true
  }
  const changSketch3 = () => {
    colorForm.value.showSketchBg = true
  }
  const changSketch4 = () => {
    colorForm.value.showSketchFont = true
  }
  const seriesIds = () => {
    useCommon.seriess().then((res) => {
      typeLists.value = res.data
    })
  }
  onMounted(async () => {
    seriesIds()
  })
  watch(
    () => currentTemp,
    (newVal, oldVal) => {
      emit('change', newVal.value)
    },
    { immediate: true, deep: true }
  )
</script>

<style scoped lang="less">
  :deep(.arco-upload-picture-card) {
    background: var(--color-bg-1);
  }

  :deep(.arco-upload-list-picture) {
    width: 80px;
    height: 80px;
    margin: 0px;
  }

  :deep(.arco-collapse-item-content) {
    padding: 4px 0px;
    background: #fff;
    border: none;
    overflow: visible;
  }

  :deep(.arco-collapse-item-content-box) {
    padding: 0px 10px;
  }

  :deep(.arco-collapse-item-header) {
    border: none;
  }

  :deep(.arco-collapse-item) {
    border: none;
  }

  :deep(.arco-slider-track::before) {
    height: 4px;
  }

  :deep(.arco-slider-bar) {
    height: 4px;
  }

  :deep(.arco-collapse-item .arco-collapse-item-icon-hover) {
    position: absolute;
    top: 50%;
    left: 4px;
  }

  :deep(.arco-collapse-item-header-left) {
    padding-left: 24px;
  }

  .pageBox {
    width: 100%;
    height: 40px;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f2f3f5;

    img {
      width: 30px;
    }

    .iconBox {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .activeIcon {
      width: 50%;
      height: 100%;
      background-color: #f2f3f5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .chooseBox {
    width: 100%;
    margin: 10px 0px;
    .title {
      width: 100%;
      margin-bottom: 5px;
    }
    .beizhu {
      font-size: 11px;
      color: #86909c;
      margin-top: 5px;
    }
    .radioBox {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 4px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0px 10px;
      box-sizing: border-box;
    }
  }
  .sliderBox_color2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 10;
    overflow: visible;
    p {
      min-width: 50px;
      display: inline-block;
      margin-right: 12px;
    }
    .setColor {
      position: absolute;
      left: 120px;
      bottom: 30px;
      z-index: 1000000;
    }
  }
  .sliderBox:last-child {
    margin-bottom: 0px;
  }
  .imageBox {
    .addImageBox {
      width: 100%;
      height: 35px;
      text-align: center;
      line-height: 35px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      cursor: pointer;
    }

    .imageBox_item {
      width: 100%;
      height: auto;
      display: flex;
      background-color: #f5f5f5;
      padding: 15px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;

      .rightBox {
        height: 80px;
        padding: 4px 0px 4px 10px;
        box-sizing: border-box;
        width: calc(100% - 80px);
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .chooseBtn {
          padding: 0px 10px !important;
          display: flex !important;
          justify-content: flex-start !important;
          background-color: #fff !important;
          border: none !important;
          color: #86909c !important;

          .chooseText {
            margin-left: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .texts {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;

          .titles {
            margin-right: 12px;
          }
        }
      }

      .contents {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #e5e6eb;
        margin-top: 15px;

        .sliderBox_color {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          position: relative;
          z-index: 10;
          overflow: visible;

          p {
            min-width: 50px;
            display: inline-block;
            margin-right: 12px;
          }

          .setColor {
            position: absolute;
            left: 120px;
            bottom: 30px;
            z-index: 1000000;
          }
        }

        .items {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;
          .whiteBg {
            flex: 1;
            height: 35px;
            background-color: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            :deep(.arco-input-wrapper) {
              width: 100% !important;
              background: none !important;
            }
          }
          .titles {
            margin-right: 10px;
            display: inline-block;
          }
        }
      }
    }
  }
</style>
